<!-- //骨架屏组件 -->
<!-- 先写个死的，再改成活的 -->
<script setup lang="ts">
const {
    bg = 'skyblue',
    animated = false,
    fade = false
} = defineProps<{
    width: number, // 宽
    height: number, // 高
    bg?: string, // 默认颜色
    animated?: boolean, // 是否需要动画一闪一闪的
    fade?: boolean // 渐变效果
}>()
</script>

<template>
    <div class="xtx-skeleton" :class="{ shan: animated, fade: fade }"
        :style="{ width: width + 'px', height: height + 'px' }">
        <!-- 1 盒子-->
        <div class="block" :style="{ backgroundColor: bg }">
        </div>
        <!-- 2 闪效果 xtx-skeleton 伪元素 --->
    </div>
</template>

<style scoped lang="less">
.xtx-skeleton {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: middle;

    .block {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }
}

// 加上这个类会有亮片效果
.shan {
    &::after {
        content: '';
        position: absolute;
        animation: shan 1.5s ease 0s infinite;
        top: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(to left,
                rgba(255, 255, 255, 0) 0,
                rgba(255, 255, 255, 0.3) 50%,
                rgba(255, 255, 255, 0) 100%);
        transform: skewX(-45deg);
    }
}

@keyframes shan {
    0% {
        left: -100%;
    }

    100% {
        left: 120%;
    }
}

// 加上这个类会有呼吸效果
.fade {
    animation: fade 1s linear infinite alternate;
}

@keyframes fade {
    from {
        opacity: 0.2;
    }

    to {
        opacity: 1;
    }
}
</style>
